<template>
  <div class="topbar">
      <ul>
          <li v-for="(item,i) in navs" :key="item.id" 
              :class="index == i ?'active':''"
              @click="tabFn(i)">
              <span>{{ item.name }}</span>
              <el-icon @click.stop="removeFn(i)"><Close /></el-icon>
          </li>
      </ul>
      <div @click="emptyFn">关闭全部</div>
  </div>
</template>

<script lang="ts" setup>
// import { ref } from 'vue'
// 导入storeToRefs函数
import {storeToRefs} from 'pinia'
// 导入 “tab” 数据存储模块
import { useTabStore } from '../stores/tabBar'
// 导入路由实例对象
import { useRouter} from 'vue-router'
const $router = useRouter();
// console.log($router)
// 获取“tab”存储对象
const tabStore = useTabStore()
// 获取“tab”存储对象的导航数据
let  { navs , index } = storeToRefs(tabStore)
const tabFn = (num:number)=>{
  tabStore.changeIndex(num);
  // 点击topbar导航切换组件
  if(navs.value && navs.value[num]){
      $router.push({path: navs.value[num].path})
  }
}
const removeFn = (index:number)=>{
  tabStore.remove(index)
}
const emptyFn = ()=> {
  tabStore.empty();
  $router.push({path: '/'})
}
</script>

<style lang="scss">
@import '../common/scss/variable.scss';
.topbar {
  background-color: #fff;
  width: 100%;
  height: 41px;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  div {
      width: 80px;
      font-size: 15px;
      color: #ccc;
      cursor: pointer;
  }
  ul {
      width: 100%;
      display: flex;
      li {
          height: 40px;
          border-right: 1px solid #f0f0f0;
          padding: 0 20px;
          line-height: 40px;
          font-size: 15px;
          color: #666;
          border-radius: 5px;
          position: relative;
          .el-icon {
              position: absolute;
              top: 50%;
              right: 10px;
              transform: translateY(-50%);
              cursor: pointer;
          }
          span {
              margin-right: 15px;
              
          }
          &.active {
              background-color: #b1ab7f;
              color: #fff;
          }
      }
  }
}
</style>